<template>
	<view>
		<TopHead :title="'我的账号'"></TopHead>
		<view class="conbox">
			<view class="box1">
				<view class="orderbox1">
					<text class="leftText"></text>
					<text>我的资产</text>
				</view>
				<view class="price1">余额（元）</view>
				<view class="price2">{{(userDataInfo.balance/100).toFixed(2)}}</view>
				<view class="bdBtn" @click="open">绑定</view>
			</view>
			<view class="box2">
				<view class="itembox" v-for="(item,index) in list" :key="index">
					<view class="icon-box">
						<image class="icon-img" src="../../static/img/meIcon3.png"></image>
					</view>
					<view class="tetxBox">
						<view class="title1">{{item.remark}}</view>
					
						<view class="title3">￥{{(item.balance*0.01).toFixed(2)}}元</view>
					  <view class="title2">{{item.createTime}}</view>  
					</view>
					<!-- <view class="ysySta">
						<text></text>
						已使用
					</view> -->
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popupBox">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="close" class="closeempty" color="#040404"
						size="20"></uni-icons>
					输入卡号
				</view>
				<view class="formlist">
					<view class="iteminput">
						<input class="uni-input ipt" type="text" v-model="certificateId" placeholder="请输入新卡号" />
					</view>
				</view>
				<view class="bdBtn" @click="handData">绑定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				certificateId: '',
				newuser: '', // 
				userDataInfo: {}, // 
				page: 1,
				pageSize: 10,
				list: [],
				total: 0, //
			}
		},
		onLoad() {
			this.userData()
		}, 
		onShow() {
			this.page = 1
			this.pageSize = 10
			this.list = []
			this.total = 0
			this.initData()
		},
		onReachBottom() {
			// 触底分页
		console.log('触底', this.total, this.list.length, this.page)
		if (this.total > this.list.length) {
			this.page = parseInt(this.page) + 1
			this.$nextTick(() => {
				this.initData()
			})
		}
		},
		methods: {
			// 个人信息
			userData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				var data={userId:userId,accountType:2}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/userAccoun/',
					method: 'GET',
					data: data,
					success(res) {
						 _this.userDataInfo = res.data
						console.log(res)

					}
				})
			},
			// 充值记录
			initData() {
				let _this = this;
				let data = {
					userId: uni.getStorageSync('id'),
					page: _this.page,
					pageSize: _this.pageSize,
					accountType: 2 // 账户类型（1：积分2：余额，3：商户账户）
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/userAccountLog/',
					method: 'GET',
					data: data,
					success(res) {
					 console.log("res initData",res);
						_this.list = [..._this.list, ...res.data.list]
						this.total = res.total

					}
				})
			},
			// 绑定卡券
			handData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					certificateId: _this.certificateId,
					userId: userId
				}
				console.log(data)
				_this.$http.fetchData({
					url: '/wechatApplet/customer/certificate/' + _this.certificateId + '/' + userId,
					method: 'POSt',
					data: {},
					success(res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});

						_this.close()
						_this.certificateId = '' // 清空输入框
						_this.initData();
						_this.userData();
					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			}


		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 196rpx;
	}

	.box1 {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(93, 69, 41, 0.25);
		padding: 26rpx 24rpx;
		position: relative;
	}

	.orderbox1 {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;

	}

	.orderbox1 .leftText {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: text-bottom;
		margin-right: 15rpx;
	}

	.price1 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 31rpx;
	}

	.price2 {
		font-size: 40rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 6rpx;
	}

	.box1 .bdBtn {
		width: 138rpx;
		height: 52rpx;
		background: #e47917;
		border-radius: 10rpx;
		text-align: center;
		line-height: 52rpx;
		color: #fff;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		font-weight: normal;
		letter-spacing: 2.8rpx;
		position: absolute;
		bottom: 66rpx;
		right: 54rpx;
	}

	.box2 {
		margin-top: 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
	}

	.itembox {
		padding-left: 104rpx;
		padding-top: 26rpx;
		position: relative;
	}

	.box2 .itembox:last-child .tetxBox {
		border-bottom: none;
	}

	.itembox .icon-box {
		width: 62rpx;
		height: 62rpx;
		background: #fffbf3;
		border-radius: 50%;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 26rpx;
		left: 22rpx;
	}

	.itembox .icon-img {
		width: 28rpx;
		height: 20rpx;
		background: #e47917;
	}

	.itembox .ysySta {
		position: absolute;
		top: 26rpx;
		right: 34rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}

	.itembox .ysySta text {
		width: 12rpx;
		height: 12rpx;
		background: #e47917;
		border-radius: 50%;
	}

	.tetxBox {
		padding-bottom: 46rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, .1);
	}

	.title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}

	.title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 6rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 14rpx;
	}

	.popupBox {
		width: 690rpx;
		height: 518rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
	}

	.popuptitle {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #5d4529;

	}

	.closeempty {
		position: absolute;
		left: 30rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.formlist {
		padding: 0 52rpx;
	}

	.iteminput {
		padding-top: 74rpx;
		padding-bottom: 81rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
	}

	.iteminput .ipt input {
		border: none;
	}

	.bdBtn {
		margin-top: 75rpx;
		margin-bottom: 70rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 48rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
</style>